<template>
    <page-header-wrapper>
        <a-card :bordered="false"
                title="">
            <a-form-model
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                v-bind="queryFormItemLayout">
                <a-row :gutter="20">
                    <a-col :md="12" :sm="24">
                        <a-form-model-item label="水印提示信息" prop="title">
                            <a-input v-model="ruleForm.title"
                                     placeholder="请输入"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :md="12" :sm="24">
                        <a-form-model-item :colon="false" label=" ">
                            <a-button type="primary" @click="onSubmit">
                                确认
                            </a-button>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import {addWater, getWater} from '@/api/api'

export default {
    data() {
        return {
            queryFormItemLayout: {
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 5}
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 16}
                }
            },
            ruleForm: {
                title: ''
            },
            rules: {
                title: [{required: true, message: '输入不能为空'}]
            }
        }
    },
    created() {
        this.getWater()
    },
    methods: {
        onSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid)
                if (valid) {
                    addWater(this.ruleForm.title).then(res => {
                        this.$message.success(res.msg)
                    })
                }
            });
        },
        getWater() {
            getWater().then(res => {
                console.log(res)
                this.ruleForm = res
            })
        }
    }
}
</script>

<style>

</style>
